﻿@{
    ViewBag.PageTitle = "在线充值 - " + ViewBag.site.SeoTitle;
    ViewBag.PageKeyword = ViewBag.site.SeoKeyword;
    ViewBag.PageDescription = ViewBag.site.SeoDescription;
}
<div class="wrapper">
    <div class="account-box">
        @{
            await Html.RenderPartialAsync("_AccountNav", "balance");
        }
        <div class="right-box">
            <div class="tab-box">
                <div class="menu-box">
                    <a href="/account/balance/list" class="item-box">
                        <span>账户余额</span>
                    </a>
                    <a href="/account/recharge/list" class="item-box active">
                        <span>充值记录</span>
                    </a>
                </div>
            </div>
            <div class="content">
                <el-form ref="editForm" :model="model" :rules="rules" label-position="right" label-width="120px">
                    <el-form-item label="用 户 名">
                        <span>{{account.userName}}</span>
                    </el-form-item>
                    <el-form-item label="账户余额">
                        <span>{{account.amount}} 元</span>
                    </el-form-item>
                    <el-form-item prop="amount" label="充值金额">
                        <el-input v-model="model.amount" placeholder="请输入充值金额(元)">
                            <template slot="append">
                                元
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="paymentId" label="支付方式">
                        <el-select v-model="model.paymentId" placeholder="请选择支付方式">
                            <el-option v-for="item in paymentList"
                                       :key="item.id"
                                       :label="item.title"
                                       :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @@click="submitForm">确认提交</el-button>
                        <el-button @@click="common.back(-1)">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</div>

@section Scripts{
    <script>
        //初始化VUE
        var ve = new Vue({
            el: '#app',
            data: {
                //账户信息
                account: {},
                //表单信息
                model: {
                    paymentId: null,
                    amount: null
                },
                //支付列表
                paymentList: [],
                //验证规则
                rules: {
                    amount: [
                        { required: true, message: '请输入操作金额', trigger: 'blur' },
                        { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确金额，可保留两位小数', trigger: 'blur' }
                    ],
                    paymentId: [
                        { required: true, message: '请选择支付方式', trigger: 'change' }
                    ],
                }
            },
            methods: {
                //初始化数据
                async initData(id) {
                    let _this = this;
                    //获取会员信息
                    await AxiosAjax({
                        url: `/account/member`,
                        success: function (res) {
                            _this.account = res.data;
                        }
                    });
                    //加载支付方式
                    await AxiosAjax({
                        url: `/client/payment/view/10?siteId=${$site}&types=pc,native`,
                        success: function (res) {
                            _this.paymentList = res.data;
                        }
                    });
                },
                //提交表单
                submitForm() {
                    let _this = this; //当前页面
                    //多个表单验证
                    const f1 = new Promise((resolve, reject) => {
                        _this.$refs['editForm'].validate((valid) => {
                            if (valid) resolve()
                        });
                    });
                    Promise.all([f1]).then(() => {
                        AxiosAjax({
                            method: 'post',
                            url: `/account/recharge`,
                            data: _this.model,
                            loading: true,
                            success: function (res) {
                                //跳转到支付页
                                window.location.href = `/payment/confirm?no=${res.data.rechargeNo}`
                            }
                        });

                    })
                },
            },
            created() {
                this.initData()
            }
        })
    </script>
}